
<template>
  <div style="margin-bottom: 10px">
    <t-button variant="text" theme="primary"  @click="isDialogDevice = true">
      <span style="color: #fff">当前套餐设备数：{{memberInfo.devices}}/{{memberInfo.jc_devices+memberInfo.jl_devices}}</span>
      &nbsp; &nbsp;&nbsp;&nbsp;立即升级
    </t-button>
  </div>

  <t-tabs v-model="value"  @change="handlerChange" :addable="true" @add="addTab" >
    <t-tab-panel
        v-for="group in groupList"
        :key="group.id"
        :value="group.id"
        :label="group.name"
        :destroy-on-hide="true"
        :lazy="true"
    >
      <div style="padding: 10px">
        <t-table
            row-key="index"
            :data="data"
            :columns="columns"
            table-layout="auto"
            cell-empty-content="-"
            lazy-load
        >
          <template #status="{ row }">
            <span v-if="row.status===1" style="color: #4ade80">在线</span>
            <span v-else>离线</span>
          </template>
          <template #work_status="{ row }">
            <span v-if="row.work_status===1" style="color: #4ade80">空闲</span>
            <span v-else>繁忙</span>
          </template>
          <template #operation="{ row }">
            <t-button theme="primary" variant="text" @click="openEdit(row)">编辑</t-button>
            <t-button theme="danger" variant="text" @click="openDelete(row)" >删除</t-button>
          </template>
        </t-table>
      </div>
    </t-tab-panel>
  </t-tabs>









      <t-dialog
          v-model:visible="isDialogEdit"
          :header="DialogEditHeader"
          width="60%"
          confirmBtn="保存"
          @confirm="save"
      >
        <t-form>
          <t-card bordered>
            <t-form-item label="设备名称"  >
              <t-input  v-model="formData.device_name"  readonly placeholder="请输入内容" />
            </t-form-item>
            <t-form-item label="设备备注"  >
              <t-input  v-model="formData.device_bname"  placeholder="请输入内容" />
            </t-form-item>
            <t-form-item label="设备分组"  >
              <t-select
                  v-model="formData.group_id"
                  placeholder="请选择设备分组"
                  clearable
              >
                <t-option v-for="item in groupList" :key="item.id" :value="item.id" :label="item.name"></t-option>

              </t-select>
            </t-form-item>

          </t-card>

        </t-form>

  </t-dialog>


  <t-dialog
      v-model:visible="visible3"
      theme="warning"
      header="操作确认"
      body="确然要删除该条数据吗?"
      :cancel-btn="null"
      @confirm="onClickConfirm"
  />


  <t-dialog
      v-model:visible="isDialogAddGroup"
      header="新增分组"
      width="40%"
      confirmBtn="保存"
      @confirm="saveGroup"
  >
    <t-form>
      <t-card bordered>
        <t-form-item label="分组名称"  >
          <t-input  v-model="groupName"   placeholder="请输入内容" />
        </t-form-item>


      </t-card>

    </t-form>

  </t-dialog>
  <t-dialog
      v-model:visible="isDialogDevice"
      header="设备加量包"
      width="50%"
      :footer="false"
  >
    <!-- 通过 props 传递参数 -->
    <DeviceView v-if="isDialogDevice" :item="deviceInfo" />
  </t-dialog>


</template>


<script setup >
import { ref } from 'vue';
import {get,post} from "@/utils/api";
import config from "@/config";
import { MessagePlugin } from 'tdesign-vue-next';
import DeviceView from "@/views/member/DeviceView.vue";
const visible3 = ref(false);
const isDialogDevice = ref(false);
const isDialogEdit = ref(false);
const DialogEditHeader = ref("编辑设备");
const delId = ref(0);
const groupList = ref([])
const value = ref(0);
const deviceInfo = ref({
  type:1,
  orderType:3
})
const getGroupList =  () => {
   get(config.deviceGroupList,{}).then(res=>{
     console.log("getGroupList", res.data.data)
     groupList.value = res.data.data
     if(res.data.data.length>0){
       value.value = res.data.data[0].id
       deviceList(value.value);
     }

   })
};
getGroupList()

const groupName = ref("");
const isDialogAddGroup = ref(false);
const saveGroup =  () => {
  post(config.deviceGroupAdd,{name:groupName.value}).then(res=>{
    if(res.data.code===0){
      MessagePlugin.error(res.data.info)
      return;
    }else{
      MessagePlugin.success(res.data.info)
      isDialogAddGroup.value = false;
      getGroupList()
    }
  })

};

const addTab = () => {
  console.log("addTab");
  isDialogAddGroup.value = true;
};

const handlerChange = (newValue) => {
  value.value = newValue;
  deviceList(newValue);
}

const deviceList = async (group_id) => {
  console.log("deviceList");
  try {
    const response = await get(config.deviceList,{
      group_id:group_id

    }); // Adjust API endpoint as needed
    if (response.status === 200) {
      data.value  = response.data.data;
      console.log("deviceList",data)
     // data.value = data;
    } else {
      console.error('Failed to fetch feedback data');
    }
  } catch (error) {
    console.error('Error fetching feedback data:', error);
  }


};



const columns = ref([
  { colKey: 'device_name', title: '设备名称' },
  { colKey: 'device_bname', title: '设备备注' },
  { colKey: 'status', title: '在线状态'},
  { colKey: 'work_status', title: '工作状态'},
  { colKey: 'create_at', title: '创建时间'},
  { colKey: 'login_at', title: '最近登录时间'},
  { colKey: 'operation', title: '操作' },
]);

const data = ref([]);

// 打开弹窗并传递参数
const openEdit = (row) => {
  console.log(row);
   formData.value = row;
   isDialogEdit.value = true;
   DialogEditHeader.value = "编辑设备";
};



// 删除弹窗部分
const openDelete = (row) => {
  visible3.value = true;
  delId.value = row.id;
  console.log('删除的数据',row)
};
const onClickConfirm = async () => {
  try {
    const response = await get(config.deviceDel,{id:delId.value}); // Adjust API endpoint as needed
    if (response.status === 200) {
      const data = response.data;
      console.log(data)
      MessagePlugin.success('删除成功')
      visible3.value = false;
      deviceList()
    } else {
      console.error('Failed to fetch feedback data');
      MessagePlugin.error('删除失败')
    }
  } catch(error) {
    MessagePlugin.error('删除失败')
  }
  visible3.value = false;
 // getTableData();

  console.log('删除成功');
};


const formData = ref({
  device_bname:1,
  device_name:"",
  group_id:1,
  id:0,
});
const save = async () => {
  console.log(formData.value);
  try {
    const response = await post(config.deviceUpdate,formData.value); // Adjust API endpoint as needed
    if (response.status === 200) {
      const data = response.data;
      console.log(data)
      if(data.code===0){
        MessagePlugin.error(data.info)
        return;
      }else{
        MessagePlugin.success(data.info)
        isDialogEdit.value = false;
        getGroupList()
      }
     // MessagePlugin.success('保存成功')

    } else {
      console.error('Failed to fetch feedback data');
      MessagePlugin.error('保存失败')
    }
  } catch(error) {
    MessagePlugin.error('保存失败')
  }
};

const memberInfo = ref({})
const getMemberInfo = () => {
  get(config.getMemberInfo).then(res => {
    memberInfo.value = res.data.data
    console.log("getMemberInfo", res.data.data)
  })
}
getMemberInfo()

</script>
<style scoped>

</style>
